<template>
	<view >
		<!-- <view class="u-p-20 cl_FB473CFF u-text-right" @click="">
			开票信息
		</view> -->
		<u-tabs-swiper @change='change' bg-color="" active-color="#FC3533" ref="tabs" :current='current' :list="list" :is-scroll="false"></u-tabs-swiper>
		<view v-if="current==0" class="">
		<view class="u-p-30" v-for="(item,index) in comList" :key="index" >
			<view class="bg_FFFFFF u-p-20 u-b-r-16">
				<view class="u-p-b-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F1F1F1FF;">
					<view class="u-flex">

						<view class="u-flex u-m-l-20">
							<u-image src="https://www.sqkjkj.vip/wxImg/car/img3.png" mode="aspectFill" width="40rpx" height='40rpx'>
							</u-image>
							<view class="u-m-l-20">{{item.shop_name}}</view>
						</view>
						<u-icon name='arrow-right' color='#454545FF'
							@click="$u.route('/pages/shopmassage/shopmassage')"></u-icon>
					</view>
					<view class="u-flex u-m-l-30">
						<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img9.png' width='28rpx' height='28rpx'>
						</u-image>
						<view @click="delInvoice(item)" class="u-m-l-10 u-font-20" style="color: #FC3533;">删除</view>
					</view>
				</view>
				<view class="u-p-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F4F1F1;"
					v-for="(items,index1) in item.order_item_list" :key="index1">
					<view class="u-flex">
						<view class="">
							<u-image :src='items.imgs[0]' width='183rpx' height='183rpx'></u-image>
						</view>
						<view class="u-p-l-10 ">
							<view class="u-weight">{{items.goods_name}}</view>
							<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
							<view class="u-font-20  u-m-t-10"
								style="">
								{{items.spece_content}}
							</view>
							<view class=" u-p-t-10" style="color: #FC3533;">￥{{items.price}}</view>
						</view>
				
					</view>
					<view class="u-font-20" style="color:#454545;">{{items.num}}</view>
				</view>
				<view class="u-m-t-20 u-flex u-row-between">
					<view class="" @click="selectInvoice(item)">
						<u-image v-if="!item.checked" src="https://www.sqkjkj.vip/wxImg/car/img.png" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
						<u-image v-else src="https://www.sqkjkj.vip/wxImg/car/img2.png" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
					</view>
					<view class="u-font-20 u-flex">
						<view class="">合计:</view>
						<view class="" style="color: #FC3533;">￥{{item.goods_amount}}</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		<!-- 开票历史 -->
		<view class="u-p-30" v-for="(item,index2) in comList" :key="index2" v-if="current==1">
			<view class="bg_FFFFFF u-p-40 u-b-r-16">
				<view class="u-p-b-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F1F1F1FF;">
					<view class="u-weight">{{item.mi_type==1?'个人发票':'企业发票'}}</view>
					<view style="color: #FC3533;">{{item.status==0?'开票中':item.status==1?'已开票':'开票失败'}}</view>
				</view>
				<view class="u-weight u-m-t-30 u-font-20">
					<text>抬头名称:</text>
					<text>{{item.name}}</text>
				</view>
				<view class="u-weight u-m-t-30 u-font-20">
					<text>申请时间:</text>
					<text>{{item.create_time}}</text>
				</view>
				
				<view class="u-weight u-m-t-30 u-font-20">
					<text>申请总额:</text>
					<text style="color: #FC3533;">￥{{item.goods_amount}}</text>
				</view>
				<view class="u-m-t-20 u-p-b-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F4F1F1;"
					@click="$u.route('/subcontract/originalprice/ordermassage/ordermassage?num='+item.order_sn)"
					v-for="(items,indexss) in item.order_item_list" :key="indexss">
					<view class="u-flex">
						<view class="">
							<u-image :src='items.imgs[0]' width='183rpx' height='183rpx'></u-image>
						</view>
						<view class="u-p-l-10 ">
							<view class="u-weight">{{items.goods_name}}</view>
							<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
							<view class="u-font-20  u-m-t-10"
								style="">
								{{items.spece_content}}
							</view>
							<view class=" u-p-t-10" style="color: #FC3533;">￥{{items.price}}</view>
						</view>
				
					</view>
					<view class="u-font-20" style="color:#454545;">{{items.num}}</view>
				</view>
				<view v-if="item.status==1" class="u-m-t-20 u-flex u-row-right">
					<view class="u-b-r-10 u-w-150 u-l-h-54 u-h-54 u-font-24 u-text-center"
						style="border: 1rpx solid #FC3533;color: #FC3533;"
						@click="select_open(item)">查看发票</view>
				</view>
			</view>
		</view>
		<view v-if="current==0" class="u-h-100">
			
		</view>
		<view class="u-fix u-w-750 u-z-300 u-p-20 bg_FFFFFF u-b-0 u-flex u-row-between" v-if="current==0">
			<view class="u-flex" @click="isAll(comList.some(item=>{return item.checked}))">
				<!-- <view class="">
					<u-image v-if="comList.some(item=>{return item.checked})" src="https://www.sqkjkj.vip/wxImg/car/img2.png"  mode="aspectFill" width="40rpx" height='40rpx'></u-image>
					<u-image v-else src="https://www.sqkjkj.vip/wxImg/car/img.png" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
				</view> -->
				<!-- <view  class="u-m-l-20 u-font-26">{{comList.some(item=>{return item.checked})?'取消全选':'全选'}}</view> -->
				<view class=" u-font-26">开票总额</view>
				<view class="u-font-30 u-m-l-20" style="color: #FB493E;">￥{{priceCount}}</view>
			</view>
			<view class="u-w-250 u-h-80 u-l-h-80 u-b-r-14 u-text-center cl_FFF" style="background-color: #FC3533;" @click="submit">申请开票</view>
		</view>
		<!-- 加载更多 -->
		<u-loadmore v-if="current!=2" :status="status" icon-type="circle" margin-bottom="20" />
		
		<u-select v-model="ttShow" value-name="id" label-name="name" :list="ttList" @confirm="ttFirm"></u-select>
		<u-mask :show="fpShow">
			<view class="warp">
				<view class="u-w-700 auto bg_FFFFFF u-p-20 u-b-r-20">
					<view class="u-p-t-20 u-p-b-20 u-text-right" @click="fpShow=false">
						<u-icon name="close-circle-fill" size="50"></u-icon>
					</view>
					<!-- <image src="" mode="aspectFit"></image> -->
					<u-image width="680rpx" height="700rpx" mode="aspectFit" :src="fpList.img"></u-image>
					
					<view @click="saveImg" class="u-m-t-20 u-w-660 bg_zs u-p-20 u-text-center u-b-r-20 cl_FFF">
						保存发票图片
					</view>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					page_size: 20,
				},
				paramone:{
					page: 1,
					page_size: 100,
				},
				status: 'loadmore',
				priceCount:0,
				current: 0,
				list: [{
					name: '开票列表'
				}, {
					name: '开票历史'
				}, {
					name: '开票信息'
				}],
				comList:[],
				ttShow:false,
				ttList:[],
				fpShow:false,
				fpList:''
			}
		},
		computed:{
			// priceCount(){
			// 	return 
			// }
		},
		onLoad() {
			
		},
		onShow() {
			this.clear()
			this.invoice_order_list(`${this.current==0?'invoice_order_list':'invoice_history_list'}`)
			this.add_open_list()
		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			if(this.comList.length>20){
				this.invoice_order_list(`${this.current==0?'invoice_order_list':'invoice_history_list'}`);
			}
		},
		methods: {
			// 切换状态
			change(e) {
				this.current = e
				if(this.current==2){
					this.$u.route('/subcontract/invoice/rise/riseAll')
				}else{
					this.clear()
					this.invoice_order_list(`${this.current==0?'invoice_order_list':'invoice_history_list'}`)
				}
			},
			async add_open_list() {
				this.$api.add_open_list(this.paramone,res=>{
					if (res.data.code == 1) {
						this.ttList=res.data.data.data
					}
				})
			},
			clear() {
				this.comList = [];
				this.params.page = 1;
			},
			async invoice_order_list(apiName) {
				await this.$api[apiName](this.params, res => {
					if (res.data.code == 1) {
						res.data.data.data.forEach(d=>{
							d.checked=false
						})
						if (res.data.data.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.comList = this.comList.concat(res.data.data.data);
						uni.stopPullDownRefresh();
					}
				})
			},
			async delInvoice(item){
				await this.$api.invoice_order_delete({order_id:item.order_id}, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title:res.data.msg,
							type: 'success',
							callback:c=>{
								this.clear()
								this.invoice_order_list(`${this.current==0?'invoice_order_list':'invoice_history_list'}`)
							}
						})
					}
				})
			},
			selectInvoice(item){
				item.checked=!item.checked
				if(item.checked){
					this.priceCount+=Number(item.goods_amount)
				}else{
					this.priceCount-=Number(item.goods_amount)
				}
			},
			isAll(status){
				if(status){
					this.comList.forEach(res=>{
						res.checked=false
					})
				}else{
					this.comList.forEach(res=>{
						res.checked=true
					})
				}
			},
			async submit(){
				if(!this.comList.some(item=>{return item.checked})){
					this.$refs.uToast.show({
						title: '请选择开票',
						type: 'error',
					})
					return
				}
				this.ttShow=true
				
			},
			async ttFirm(e){
				let para={
					order_id:'',
					member_invoice_id:e[0].value
				}
				await this.$com.jobData(this.comList,'order_id').then(com=>{
					console.log(com)
					para.order_id=com
				})
				await this.$api.invoice_apply(para, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success',
							callback:c=>{
								uni.navigateBack()
							}
						})
					}
				})
			},
			select_open(item){
				this.$api.view_invoice({
					order_id: item.order_id
				}, res => {
					if (res.data.code == 1) {
						this.fpShow=true
						this.fpList=res.data.data
					}
				})
			},
			// 保存图片
			saveImg() {
				uni.downloadFile({
					url: this.fpList.img,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res2) => {
								console.log(res2)
							},
							fail: (f) => {
								console.log(f)
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}
</style>
